<template>
    <div v-for="(item, index) in receiveResult" :key="index">
        <div class="search-item-preview">
            <div class="title-preview">{{ item.name_zh }}：</div>
            <template v-if="item.type === 'int'">
                <a-input v-model:value="item.value" class="a-inp-preview" disabled />
                <div class="exp-anddesc">
                    <a-button type="link" class="desc" @click="setVisible(item)">查看示例</a-button>

                    <div class="desc">{{ item.desc }}</div>
                </div>
            </template>
            <template v-else-if="item.type === 'string'">
                <a-input v-model:value="item.value" class="a-inp-preview" disabled />
                <div class="exp-anddesc">
                    <a-button type="link" class="desc" @click="setVisible(item)">查看示例</a-button>

                    <div class="desc">{{ item.desc }}</div>
                </div>
            </template>

            <template v-else-if="item.type === 'pem'">
                <a-input v-model:value="item.value" class="a-inp-preview" disabled />
                <div class="exp-anddesc">
                    <a-button type="link" class="desc" @click="setVisible(item)">查看示例</a-button>

                    <div class="desc">{{ item.desc }}</div>
                </div>
            </template>

            <template v-else-if="item.type === 'exe'">
                <a-input v-model:value="item.value" class="a-inp-preview" disabled />
                <div class="exp-anddesc">
                    <a-button type="link" class="desc" @click="setVisible(item)">查看示例</a-button>

                    <div class="desc">{{ item.desc }}</div>
                </div>
            </template>
            <template v-else-if="item.type === ''">
                <a-input v-model:value="item.value" class="a-inp-preview" disabled />
                <div class="exp-anddesc">
                    <a-button type="link" class="desc" @click="setVisible(item)">查看示例</a-button>

                    <div class="desc">{{ item.desc }}</div>
                </div>
            </template>
            <template v-else-if="item.type === 'bool'">
                <a-input v-model="item.value" class="a-inp-preview" disabled />
                <div class="exp-anddesc">
                    <a-button type="link" class="desc" @click="setVisible(item)">查看示例</a-button>

                    <div class="desc">{{ item.desc }}</div>
                </div>
            </template>
            <template v-else-if="item.type === 'object'">
                <div class="totalheight">
                    <div class="exp-anddesc1">
                        <div class="desc">{{ item.desc }}</div>
                    </div>
                    <div class="padding-content">
                        <paddingModal :namesend3="name2" :item-value="item.value" />
                    </div>
                </div>
            </template>
            <template v-else>
                <div class="imgcontents">
                    <div class="imgself">
                        <img
                            v-if="item.fileData && item.type === 'png'"
                            :src="`data:image/${item.type};base64,${item.fileData}`"
                            alt="default"
                        />
                        <img
                            v-else-if="item.fileData && item.type !== 'png'"
                            :src="`data:image/${item.type}+xml;base64,${item.fileData}`"
                            alt="default"
                        />
                        <div v-else class="loadingdiv">
                            <loading-outlined v-if="loading"></loading-outlined>

                            <div class="antext">no img</div>
                        </div>
                    </div>
                    <div class="exp-anddesc">
                        <a-button type="link" class="desc" @click="setVisible(item)"
                            >查看示例</a-button
                        >

                        <div class="desc">{{ item.desc }}</div>
                    </div>
                </div>
            </template>
        </div>
        <a-image
            v-if="itemData.demoData"
            :width="100"
            :style="{ display: 'none' }"
            :preview="{
                visible,
                onVisibleChange: setVisible,
            }"
            :src="itemData.demoData ? `data:image/png;base64,${itemData.demoData}` : ''"
        >
        </a-image>
    </div>
</template>

<script setup>
import { defineProps, ref, watch } from 'vue';

import paddingModal from '@/components/modalComponent/paddingmoadl.vue';

const receiveResult = ref([]);

const props = defineProps({
    arrayProps: {
        type: Array,
        required: true,
    },
    name: {
        type: String,
        required: true,
    },
});
const name2 = ref('');

watch(
    () => props.name,
    (newArray) => {
        name2.value = newArray;
    },
    { immediate: true },
);

watch(
    () => props.arrayProps,
    (newArray) => {
        receiveResult.value = newArray;
    },
    { immediate: true },
);

// 上传示例图片
const itemData = ref('');
const visible = ref(false);
const setVisible = (val) => {
    visible.value = true;
    itemData.value = val;
};
</script>

<style lang="scss" scoped>
@import '@/styles/update.scss';
.totalheight {
    display: flex;
    width: 700px;

    margin-left: 152px;
}
.exp-anddesc {
    display: flex;
    flex-direction: column;
    margin-left: 30px;
    height: 50px;
    margin-top: 10px;
}
</style>
